<template>
	<view class="main u-font-26">
		<view id="head-box" class="head-box">
			<u-notice-bar text="您可以批量设置多个场地，也可逐个设置" bgColor="rgb(217, 226, 255)" color="rgb(69, 111, 255)">
			</u-notice-bar>
			<view class="search-box u-p-t-28 u-p-b-8">
				<u-search :show-action="false" placeholder="请输入场地名称" class="input" clearabled
					@custom="clickSearchIcon()" v-model="params.keyword" bgColor="rgb(247, 248, 247)" :animation="true"
					margin="20rpx" searchIconShow="true" showAction="true" />
				<text class="search-box-r u-p-30" @click="batchUploadClick(false)" v-if="batchUpload">取消批量</text>
				<text class="search-box-r u-p-30" @click="batchUploadClick(true)" v-else>批量设置</text>
			</view>
		</view>

		<scroll-view :style="{ height: height + 'px' }" scroll-y="true" @scrolltolower="reachBottom">
			<view class="store-list u-m-t-20 u-m-b-20">
				<view class="store-item u-font-28 u-row-between u-p-l-26 u-p-r-26"
					v-for="(item, index) of merchantStoreList" :key="index" @click="nav(item)">
					<view class="body-title">
						<view class="store-item-l u-flex-row">
							<view class="u-m-r-19" v-if="batchUpload">
								<u-checkbox-group @change="merchantStoreCheckboxChange(item)">
									<u-checkbox :checked="item.checked" shape="circle" activeColor="#6072FF"
										:name="item.id"></u-checkbox>
								</u-checkbox-group>
							</view>
							<view>{{item.storeName}}<text class="num-tips">({{item.totalDevice}}台)</text></view>

						</view>
						<view class="store-item-r u-flex-row">
							<text v-if="item.ledgerMerchantVoList.length > 0">已设置</text>
							<text v-else class="store-item-r-t">未设置比例</text>
							<u-icon name="arrow-right" color="rgba(0, 0, 0, 0.5)" size="16"></u-icon>
						</view>

					</view>
					<view v-if="item.ledgerMerchantVoList.length > 0" class="body-content-title">
						共{{item.merchantCount}}个商户参与分账
            <text v-if="item.ledgerMerchantVoList[0].splitCommission">，支付手续费平摊</text>
            <text v-if="item.ledgerMerchantVoList[0].designatedGoods">
              <text v-if="item.ledgerMerchantVoList[0].designatedGoodsType == 1">
                ，{{item.commodityCount}}件商品
                <text v-if="item.ledgerMerchantVoList[0].removalCost">除成本后</text>
                参与分账
              </text>
              <text v-if="item.ledgerMerchantVoList[0].designatedGoodsType == 2">
                ，全部商品都<text v-if="item.ledgerMerchantVoList[0].removalCost">除成本后</text>分账
              </text>
            </text>
					</view>
					<view v-if="item.ledgerMerchantVoList.length > 0">
						<view class="body-content" v-for="(it,subIndex) of item.ledgerMerchantVoList" :key="subIndex">
							<view class="body-content-list">
								<view class="list-cion"></view>
								<view class="list-text">
									{{it.name}}：{{it.shareRate}}%
								</view>
							</view>
							<view class="u-m-t-50" v-if="item.ledgerMerchantVoList.length-1 == subIndex">
								<text
									class="u-p-r-4">有效期：{{$u.timeFormat(Date.parse(it.entryIntoForceTime), 'yyyy-mm-dd hh:MM:ss')}}</text>
								<text>至</text>
								<text class="u-p-l-4" v-if="$u.test.isEmpty(it.failureTime)">不限</text>
								<text v-else
									class="u-p-l-4">{{$u.timeFormat(Date.parse(it.failureTime), 'yyyy-mm-dd hh:MM:ss')}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="u-p-b-50" v-if="merchantStoreList.length == 0">
					<u-empty text="暂无场地" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" />
				</view>
			</view>
			<u-loadmore v-if="merchantStoreList.length > 0" :status="loadStatus" height="70rpx" line=true>
			</u-loadmore>
		</scroll-view>

		<view id="footer" class="footer u-flex-row" v-if="batchUpload">
			<u-checkbox-group @change="checkAllChange($event)">
				<u-checkbox :checked="checkedAll" shape="circle" label="全选" activeColor="#6072FF"></u-checkbox>
			</u-checkbox-group>

			<u-button text="下一步" :customStyle="nextStepBtnCustomStyle" @click="navAll()"></u-button>
		</view>
		<view class="footerRecord" id="footer" v-else>
			<u-button text="分账比例操作记录" :customStyle="recordBtnCustomStyle" @click="record()"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 0,
				nextStepBtnCustomStyle: {
					width: '488rpx',
					height: '88rpx',
					background: 'rgb(69, 111, 255)',
					borderRadius: '120px',
					color: '#fff',
				},

				batchUpload: false,
				merchantStoreList: [],
				checkedMerchantStoreIdArray: [],
				checkedAll: false,
				params: {
					pageNum: 1,
					pageSize: 10,
					totalPage: 1,
					keyword: ''
				},
				loadStatus: 'nomore', //列表底部加载更多状态
				recordBtnCustomStyle: {
					width: '688rpx',
					height: '88rpx',
					background: 'rgb(69, 111, 255)',
					borderRadius: '120px',
					color: '#fff',
				},
			}
		},
		onReady() {
			this.getPomHeight()
		},
		// onLoad() {
		// 	this.findAreaLedgerProportionAndPage()
		// },
		onShow() {
			this.loadData()
			this.qingkon()
		},
		//刷新
		onPullDownRefresh() {
			this.params.keyword = '';
			this.loadData();
		},
		methods: {
			//下一页返回这里的时候，清空选中的数据
			qingkon() {
				this.checkedAll = false
				this.checkedMerchantStoreIdArray = []
			},
			//滑动到底部
			reachBottom() {
				if (this.params.pageNum >= this.params.totalPage) {
					return;
				};
				this.params.pageNum++;
				this.loadStatus = 'loading'
				this.findAreaLedgerProportionAndPage();
			},
			//点击搜索框图标
			clickSearchIcon() {
				this.loadData();
			},
			loadData() {
				this.params.pageNum = 1;
				this.merchantStoreList = [];
				this.findAreaLedgerProportionAndPage();
			},
			findAreaLedgerProportionAndPage() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$api('merchantStore.findAreaLedgerProportionAndPage', this.params)
					.then(res => {
						if (res.status == 0) {
							uni.hideLoading();
							this.params.pageNum = res.data.pageNum;
							this.params.totalPage = res.data.pages;
							this.loadStatus = res.data.pageNum === res.data.pages ? 'nomore' : 'loadmore';
							if (this.params.totalPage == 0) {
								this.loadStatus = 'nomore';
							}
							this.merchantStoreList = [...this.merchantStoreList, ...res.data.list]
						} else {
							uni.hideLoading();
							this.$helpers.toast('请求数据失败:' + res.msg);
						}
					})
			},
			//全选
			checkAllChange(e) {
				this.checkedAll = e.length > 0 ? true : false;
				this.checkedMerchantStoreIdArray = [];
				if (!this.checkedAll) {
					this.merchantStoreList.forEach(item => {
						item.checked = false;
					})
					return
				}

				this.merchantStoreList.forEach(item => {
					item.checked = true;
					this.checkedMerchantStoreIdArray.push(item)
				})
			},
			batchUploadClick(bool) {
				this.batchUpload = bool;
				this.$nextTick(() => {
					this.getPomHeight();
				});
			},

			reachBottom() {

			},

			//选择
			merchantStoreCheckboxChange(data) {
				this.checkedMerchantStoreIdArray = [];
				this.merchantStoreList.map(item => {
					if (item.merchantStoreId === data.merchantStoreId) {
						item.checked = !item.checked
					}
				})
				this.merchantStoreList.map(item => {
					if (item.checked) {
						this.checkedMerchantStoreIdArray.push(item)
					}
				})
				if (this.merchantStoreList.length == this.checkedMerchantStoreIdArray.length) {
					this.checkedAll = true
				} else {
					this.checkedAll = false
				}
			},
			//查看分账记录
			record(){
				uni.navigateTo({
					url: '/pages-automatic-ledger/automatic-ledger/ledger-proportion-record/ledger-proportion-record'
				});
			},
			//路径跳转
			nav(item) {
				if (this.$u.test.isEmpty(item.merchantId)) {
					uni.showModal({
						title: '该场地还没有绑定收款商户，是否去绑定？',
						cancelText: '取消',
						confirmText: '确认',
						showCancel: true,
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages-other/merchant-store/add-merchant-store?siteId=' +
										item.merchantStoreId
								});
							}
						}
					});
					return
				}
				if (item.isSubAccount == 0 || this.$u.test.isEmpty(item.isSubAccount)) {
					getApp().err('该场地绑定的【' + `${item.name?item.name:''}` + '】支付渠道不支持分账')
					return
				}
				uni.navigateTo({
					url: '/pages-automatic-ledger/automatic-ledger/ledger-proportion-set/ledger-proportion-set'.concat(
						"?merchantStoreId=").concat(item.merchantStoreId).concat("&maximumRatio=").concat(item
						.maximumRatio)
				});
			},

			//下一步
			navAll() {
				for (let i = 0; i < this.checkedMerchantStoreIdArray.length; i++) {
					if (this.$u.test.isEmpty(this.checkedMerchantStoreIdArray[i].merchantId)) {
						let siteId = this.checkedMerchantStoreIdArray[i].merchantStoreId
						uni.showModal({
							title: '该场地还没有绑定收款商户，是否去绑定？',
							cancelText: '取消',
							confirmText: '确认',
							showCancel: true,
							success(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages-other/merchant-store/add-merchant-store?siteId=' +
											siteId
									});
								}
							}
						});
						return
					}
					if (this.checkedMerchantStoreIdArray[i].isSubAccount == 0 || this.$u.test.isEmpty(this
							.checkedMerchantStoreIdArray[i].isSubAccount)) {
						getApp().err('该场地绑定的支付渠道不支持分账')
						return;
					}
				}
				if (this.checkedMerchantStoreIdArray.length == 0) {
					this.$helpers.toast('请选择场地');
				} else {
					uni.navigateTo({
						url: './ledger-proportion-batch/ledger-proportion-batch'.concat(
							"?checkedMerchantStoreIdArray=").concat(JSON.stringify(this
							.checkedMerchantStoreIdArray)).concat("&maximumRatio=").concat(this
							.merchantStoreList[0].maximumRatio)

					});
				}

			},

			//计算滚动条高度
			getPomHeight() {
				let query = wx.createSelectorQuery().in(this)
				query.select('#head-box').boundingClientRect();
				query.select('#footer').boundingClientRect();
				query.exec(res => {
					this.height = wx.getSystemInfoSync().windowHeight;
					for (var i = 0; i < res.length; i++) {
						if (res[i]) {
							this.height -= res[i].height;
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		.head-box {
			.search-box {
				background-color: #fff;
				display: flex;
				flex-direction: row;
				align-items: center;

				/deep/ .u-search {
					width: 550rpx;
				}

				.search-box-r {
					color: rgb(69, 111, 255);
				}
			}
		}

		.store-list {
			background-color: #fff;

			.store-item {
				padding: 40rpx 25rpx;
				border-bottom: 1rpx solid rgb(240, 240, 240);

				.body-title {
					display: flex;
					justify-content: space-between;
				}

				.body-content-title {
					color: rgba(0, 0, 0, 0.7);
					font-size: $f-sm;
					margin-left: 20rpx;
					margin-top: 20rpx;
				}

				.body-content {
					font-size: $f-sm;
					color: rgba(0, 0, 0, 0.7);
					padding: 20rpx;

					.body-content-list {
						display: flex;
						align-items: center;
						margin-top: 20rpx;

						.list-cion {
							margin-right: 10rpx;
						}
					}
				}

				.num-tips {
					color: rgba(0, 0, 0, 0.7);
					padding-left: 10rpx;
					font-size: $f-sm;
				}

				.store-item-r {
					.store-item-r-t {
						color: rgba(0, 0, 0, 0.5);
					}
				}

				.list-cion {
					width: 5px;
					height: 5px;
					background: rgb(96,114,255);
					border-radius: 50%;
				}
			}
		}

		.footer {
			width: 100%;
			height: 166rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			padding: 20rpx 24rpx;
			border-top: 1rpx solid rgba(0, 0, 0, 0.1);

			/deep/ .u-checkbox {
				align-items: flex-start;
				padding-top: 30rpx;
			}
		}
		.footerRecord{
			width: 100%;
			height: 166rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			padding-top: 30rpx;
		}

	}
</style>
